<div class="px-6 py-4 flex justify-between items-center">
  <div class="text-lg font-semibold">{{ 'PAC.Xpert.Task' | translate: { Default: 'Task' } }}</div>
</div>

<div class="max-w-full md:max-w-lg lg:max-w-2xl mx-auto mt-16">
  <div class="w-full mt-8 pb-2 border-b border-solid border-gray-300">
    {{ 'PAC.Xpert.Scheduled' | translate: { Default: 'Scheduled' } }}
  </div>
  @for (task of scheduledTasks(); track task.id) {
    <ng-container *ngTemplateOutlet="taskTempl; context: { task: task }"></ng-container>
  }

  <div class="w-full mt-8 pb-2 border-b border-solid border-gray-300">
    {{ 'PAC.Xpert.Paused' | translate: { Default: 'Paused' } }}
  </div>
  @for (task of pausedTasks(); track task.id) {
    <ng-container *ngTemplateOutlet="taskTempl; context: { task: task }"></ng-container>
  }
</div>

<ng-template #taskTempl let-task="task">
  <div class="task flex border-b border-solid border-gray-200">
    <div class="flex-1 flex items-center cursor-pointer -mx-3 px-4 py-2 rounded-2xl text-sm hover:bg-gray-100"
      [class.deleted]="!!task.deletedAt"
      (click)="editTask(task)"
    >
      <div class="flex-1 flex justify-start items-center gap-1 overflow-hidden">
        <emoji-avatar [avatar]="task.xpert.avatar" xs class="overflow-hidden rounded-lg shadow-sm"
          [matTooltip]="task.xpert.title||task.xpert.name"
          matTooltipPosition="above"
        />
        @if (task.status === eXpertTaskStatus.PAUSED) {
          <i class="ri-pause-circle-fill text-xl text-text-secondary"></i>
        } @else if (task.status === eXpertTaskStatus.RUNNING) {
          <i class="ri-calendar-schedule-line mr-2 text-xl text-text-secondary"></i>
        }
        <div class="font-medium truncate">{{task.name}}</div>

        <span class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300"
          [matTooltip]="'PAC.Chat.TaskSuccessCount' | translate: {Default: 'Number of successful task executions'}"
          matTooltipPosition="above"
        >
          {{task.successCount}}
        </span>
        @if (task.errorCount) {
          <span class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300"
            [matTooltip]="'PAC.Chat.TaskFailureCount' | translate: {Default: 'Number of task execution failures'}"
            matTooltipPosition="above">
            {{task.errorCount}}
          </span>
        }
      </div>
      
      <div class="text-text-secondary truncate">{{task.scheduleDescription}}</div>
    </div>
  </div>
</ng-template>

<ng-template #menu let-task="task">
  <div cdkMenu class="cdk-menu__large">
    <div cdkMenuItem (click)="editTask(task)">
      <i class="ri-edit-line text-lg mr-1"></i>
      {{ 'PAC.ACTIONS.Edit' | translate: { Default: 'Edit' } }}
    </div>
    @if (task.status === eXpertTaskStatus.RUNNING) {
      <div cdkMenuItem (click)="pauseTask(task)">
        <i class="ri-pause-circle-line text-lg mr-1"></i>
        {{ 'PAC.Chat.Pause' | translate: { Default: 'Pause' } }}
      </div>
    }
    <div class="border-b border-solid border-divider-regular my-1"></div>
    <div cdkMenuItem (click)="viewAllTaks()">
      <i class="ri-list-check-3 text-lg mr-1"></i>
      {{ 'PAC.Xpert.ViewAllTasks' | translate: { Default: 'View all tasks' } }}
    </div>
  </div>  
</ng-template>